<template>
  <div>
    <Card>
      <Row>
        <Form ref="form" :label-width="120" :model="form" inline>
          <Form-item label="选择月份：" prop="month">
            <DatePicker
              v-model="form.month"
              placeholder="请选择月份"
              placement="bottom-start"
              style="width: 200px"
              type="month"
            >
            </DatePicker>
          </Form-item>
          <Form-item style="margin-left:-90px;">
            <Button icon="md-search" type="primary" @click="handleSearch">搜索</Button>
            <Button @click="handleReset">重置</Button>
          </Form-item>
        </Form>
      </Row>
    </Card>
    <Card>
      <Row>
        <vxe-table
          :data="tableData"
          :footer-method="footerMethod"
          :loading="loading"
          :show-footer="showFooter"
          border
          class="mytable-footer"
          footer-row-class-name="footer-row"
          highlight-hover-row
          max-height="1000"
          stripe>
          <vxe-table-column align="center" type="seq" width="60"></vxe-table-column>
          <vxe-table-column align="center" field="department" title="部门" width="110"></vxe-table-column>
          <vxe-table-column align="center" field="good" sortable title="优秀" width="100"></vxe-table-column>
          <vxe-table-column align="center" field="competent" sortable title="称职" width="100"></vxe-table-column>
          <vxe-table-column align="center" field="un_competent" sortable title="不称职" width="100"></vxe-table-column>
          <vxe-table-column align="center" field="other" sortable title="其它" width="100"></vxe-table-column>
          <vxe-table-column align="center" field="note" title="备注" width="250"></vxe-table-column>
        </vxe-table>
      </Row>
    </Card>
  </div>
</template>

<script>
import XEUtils from 'xe-utils'
import {assessmentList} from '../../../api/personnel'

export default {
  name: 'Assessment',
  data() {
    return {
      tableData: [],
      loading: false,
      form: {
        month: '2021-08'
      },
      showFooter: false,
    }
  },
  computed: {},
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.loading = true
      assessmentList(this.form).then(res => {
        this.loading = false
        if (res.data.length > 0) {
          this.tableData = res.data
          this.showFooter = true
        } else {
          this.tableData = []
          this.showFooter = false
        }
      })
    },
    footerMethod({columns, data}) {
      const sums = []
      columns.forEach((column, columnIndex) => {
        if (columnIndex === 0) {
          sums.push('合计')
        } else {
          let sumCell = null
          switch (column.property) {
            case 'good':
            case 'competent':
            case 'un_competent':
            case 'other':
              sumCell = XEUtils.sum(data, column.property)
              break
            case 'department':
            case 'note':
              sumCell = '-'
              break
          }
          sums.push(sumCell)
        }
      })
      // 返回一个二维数组的表尾合计
      return [sums]
    },
    handleReset() {
      this.form = {
        month: '2021-08'
      }
      this.init()
    },
    handleSearch() {
      this.init()
    },
  }
}
</script>

<style>
</style>
